<template>
  <div>
    <common-head :title="$route.name"/>
    <div class="user">
      <div class="userinfo">
        <!-- 头像 -->
        <div class="advator">
          <van-image
            round
            fit="cover"
            width="2.5rem"
            height="2.5rem"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
        </div>
        <!-- 用户信息 -->
        <div class="desc-info">
          <div class="username">{{userInfo.username}}</div>
          <div>{{userInfo.wx}}</div>
        </div>
        <!-- 修改信息 -->
        <div class="right">
          <van-icon name="arrow" size="22" color="#fff" @click="toEdit"/>
        </div>
      </div>
      <div class="orders">
        <van-cell-group inset>
          <van-cell title="我的购物车" icon="shopping-cart-o" is-link to="/cart"/>
          <van-cell title="我的订单" icon="star-o" is-link to="/order"/>
          <van-cell title="我的收货地址" icon="records" is-link to="/address"/>
          <van-cell title="我的收藏" icon="newspaper-o" is-link to="/favor"/>
        </van-cell-group>
        <van-cell title="关于我们" icon="question-o" is-link inset to="/notfound" class="about"/>
      </div>
    </div>
    <tabbar/>
  </div>
</template>

<script>
import Tabbar from '_components/Tabbar'
import CommonHead from '../../components/CommonHead.vue'
import { getUserInfo } from '_api'
import { getToken } from '../../utils'
export default {
  name: 'User',
  data () {
    return {
      userInfo: {}
    }
  },
  created () {
    getUserInfo({ token: getToken() }).then(res => {
      if (res.data.code === 0) {
        this.userInfo = res.data.data.base
      }
    })
  },
  methods: {
    toEdit () {
      this.$router.push('/edit')
    }
  },
  components: { Tabbar, CommonHead }
}
</script>

<style lang="scss" scoped>
.user{
  .userinfo{
    padding-top: 0.5rem;
    padding-bottom: 0.3rem;
    background-color: rgb(21, 143, 84);
    display: flex;
    align-items: center;
    .advator{
      padding-left: 0.5rem;
      flex: 3
    }
    .desc-info{
      color: #fff;
      padding-left: 0.2rem;
      flex: 6;
      font-size: 0.4rem;
      .username{
        padding-bottom: 0.2rem;
      }
    }
    .right{
      flex: 1;
    }
  }
  .orders{
    margin-top: 0.7rem;
  }
  .about{
    margin-top: 1rem;
    width: 94%;
    margin-left: 0.3rem;
    border-radius: 0.15rem;
  }
}
</style>
